<template>
  <div>
    <a-modal :visible.sync="visible" :maskClosable="false" :keyboard="!formModal.loading" :closable="!formModal.loading" title="科技成果案例" width="760px" :destroyOnClose="true" @cancel="cancelSub" centered>
      <!-- :destroyOnClose="true" 如果希望每次打开都是新内容，设置 destroyOnClose-->
      <a-form-model class="flex-model-form" ref="addForm" :model="formModal" :rules="rules">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item
              label="成果分类"
              prop="achievementClassifyId"
              
              key="2"
            >
              <a-select
                v-model="formModal.achievementClassifyId"
                @change="getLevelList"
                placeholder="请选择"
                :disabled="modalType === 'look'"
              >
                <a-select-option
                  v-for="item in achievementsList"
                  :key="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="成果等级" prop="achievementsLevelId">
              <a-select
                v-model="formModal.achievementsLevelId"
                placeholder="请选择"
                @change="LevelListChange"
                :disabled="modalType === 'look'"
              >
                <a-select-option
                  v-for="item in LevelList"
                  :key="item.id"
                >
                  {{ item.levelName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="附件上传" prop="fileInfos">
              <upload-list :disabled="modalType === 'look'" :businessCode="'BM19'" :uploadArrys.sync="formModal.fileInfos" @fileArrysData="handleFileUploaded" multiple></upload-list>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <template slot="footer">
        <a-button :disabled="formModal.loading" key="back" @click="cancelSubfileInfos">
          取消
        </a-button>
        <a-button v-if="!eidtabled" key="submit" type="primary" :loading="formModal.loading" @click="submitForm">
          提交
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import UploadList from '@/components/UploadList'
import { getClassifyList, getGradeList } from '@/api/achievementsType'
import { caseAdd,caseUpdate,caseDetails } from '@/api/achievementsManage'
export default {
  name: 'AddModal',
  props: {
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    modalType: {
      type: String,
      default() {
        return 'add'
      }
    },
    editId: {
      type: [String, null],
      default() {
        return null
      }
    }
  },
  components: {
    UploadList
  },

  data() {
    return {
      achievementsList: [],
      LevelList: [],
      formModal: {
        loading: false,
        achievementsLevelId:'',
        achievementClassifyId:'',
        achievementClassifyName:'',
        achievementsLevelName:'',
        creatorName:'',
        fileInfos: [],
      },
      rules: {
          achievementClassifyId: [{ required: true, message: '请选择', trigger: 'change' }],
          achievementsLevelId: [{ required: true, message: '请选择', trigger: 'change' }],
          fileInfos: [{ type: 'array', required: true, message: '请上传附件', trigger: 'change' }],
        }
    }
  },
  watch: {
    visible: {
      handler(nv, old) {
        console.log('nvvvvv',nv)
        if (this.$refs.addForm) this.$refs.addForm.resetFields()
        if (nv) {
          if (this.modalType !== 'add') {
            this.getDetail()
          } else {
            this.formModal = {
              achievementsLevelId: '',
              achievementClassifyId: '',
              achievementClassifyName: '',
              achievementsLevelName: '',
              fileInfos: [],
              creatorName : JSON.parse(sessionStorage.getItem('ycloud-user_info'))?.name,
            }
          }
        }
      }
    }
  },
  computed: {
    showModal() {
      return this.visible
    },
    eidtabled() {
      return this.modalType === 'look'
    }
  },
  async created() {
    let res = await getClassifyList({ status: 1 })
    if (res.code === this.SUCCESS_CODE) {
      this.achievementsList = res.data
      console.log('this.achievementsList',this.achievementsList)
    }
  },
  mounted() {},
  methods: {
    cancelSubfileInfos(){
      this.$refs.addForm.resetFields()
      this.visible = false
      // this.$emit('update:visible', false)
      this.formModal.creatorName = JSON.parse(sessionStorage.getItem('ycloud-user_info'))?.name
      // this.formModal = {
      //         achievementsLevelId: '',
      //         achievementClassifyId: '',
      //         achievementClassifyName: '',
      //         achievementsLevelName: '',
      //         fileInfos: [],
      //         creatorName : JSON.parse(sessionStorage.getItem('ycloud-user_info'))?.name,
      //       }
    },
    async getLevelList(id) {
      this.formModal.achievementsLevelId = null
      this.achievementsList.forEach((item)=>{
        if (item.id === id){
          this.formModal.achievementClassifyName = item.name
        }
      })
      let resList = await getGradeList({ typeId: id, status: 1 })
      if (resList.code === this.SUCCESS_CODE) {
        this.LevelList = resList.data.data
      }
    },
     LevelListChange(id) {
       this.LevelList.forEach((item)=>{
        if (item.id === id){
          this.formModal.achievementsLevelName = item.levelName;
          console.log(item,this.formModal.achievementsLevelName )
        }
      })
    },
    handleFileUploaded(list) {
      this.formModal.fileInfos = [...list]
    },
    getDetail() {
      caseDetails({ id: this.editId }).then(res => {
        if (res.data) {
          this.getLevelList(res.data.achievementClassifyId)
          this.formModal = res.data;
        }
      })
    },
    cancelSub(reset) {
      this.$refs.addForm.resetFields()
      this.visible = false
      this.$emit('update:visible', false)
    },
    onSubmit(param) {
      if (this.modalType == 'add') {
        this.addRoom(param)
      } else if (this.modalType == 'edit') {
        this.editRoom(param)
      }
    },
    addRoom(param) {
      this.formModal.loading = true
      setTimeout(() => {
        this.formModal.loading = false
      }, 2000);
      param.creatorName = JSON.parse(sessionStorage.getItem('ycloud-user_info'))?.name
      caseAdd(param)
        .then(res => {
          console.log(res)
          this.formModal.loading = false
          if (res.data) {
            this.$message.success('科技成果案例新增成功！')
            this.$emit('submitForm')
            this.cancelSub('reset')
          } else {
            this.$message.error('科技成果案例新增失败！')
          }
        })
        .catch(() => {
          this.formModal.loading = false
        })
    },
    editRoom(param) {
      this.formModal.loading = true
      caseUpdate(param)
        .then(res => {
          this.formModal.loading = false
          if (res.data) {
            this.$message.success('科技成果案例修改成功！')
            this.$emit('submitForm')
            this.cancelSub('reset')
          } else {
            this.$message.error('科技成果案例修改失败！')
          }
        })
        .catch(() => {
          this.formModal.loading = false
        })
    },
    submitForm() {
      // const formData = [...this.formModal.form];
      // formData.sex = formData.sex.toString();
      this.$refs.addForm.validate(valid => {
        if (valid) {
          console.log('submit!')
          this.onSubmit(this.formModal)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.flex-model-form .ant-form-item {
  display: flex;
}
.upload-list .ant-upload-list {
  // display: contents;
}
// .upload-list .ant-upload-list-item-image::after {
//   content: '';
//   display: inline-block;
//   position: absolute;
//   z-index: 2;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   background-image: url("../../../../../assets/noPic.png");
//   background-size: cover;
//   background-color: #fff;
// }
</style>
